apps/web/client/src/app/project/[id]/_components/right-panel/dev-tab/code-controls.tsx (3)

96-112: Prevent floating promise; keep tooltip usable when disabled

• Add void before calling the async handler in onClick to satisfy no-floating-promises rules and keep consistency with saveFile usage.
• Optional: disabled buttons often don’t trigger tooltips. Wrapping the button with a span as the TooltipTrigger keeps the tooltip accessible when disabled (same improvement applies to other disabled icon buttons in this file as a follow-up).

Apply this diff:

-                    <TooltipTrigger asChild>
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            disabled={isRestarting}
-                            onClick={() => handleRestartDevServer()}
-                            className="p-2 w-fit h-fit hover:bg-background-onlook cursor-pointer"
-                            aria-label="Restart dev server"
-                        >
-                            <Icons.Reload className={cn("h-4 w-4", isRestarting && "animate-spin")}/>
-                        </Button>
-                    </TooltipTrigger>
+                    <TooltipTrigger asChild>
+                        <span>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                disabled={isRestarting}
+                                onClick={() => void handleRestartDevServer()}
+                                className="p-2 w-fit h-fit hover:bg-background-onlook cursor-pointer"
+                                aria-label="Restart dev server"
+                            >
+                                <Icons.Reload className={cn("h-4 w-4", isRestarting && "animate-spin")} />
+                            </Button>
+                        </span>
+                    </TooltipTrigger>

---

15-15: Import toast from the UI wrapper for consistent theming

The UI package’s sonner.tsx wrapper (packages/ui/src/components/sonner.tsx) re-exports toast from “sonner”, ensuring it flows through our design tokens/providers. Importing directly from "sonner" bypasses our theming. Please update this file accordingly:

• File: apps/web/client/src/app/project/[id]/_components/right-panel/dev-tab/code-controls.tsx
Line 15:

-import { toast } from 'sonner';
+import { toast } from '@onlook/ui/sonner';

You may also want to run a repo-wide check for other direct "sonner" imports and replace them with @onlook/ui/sonner for uniform styling.

---

41-55: Harden restart handler: rename, debounce, enrich errors

A few optional tweaks to make this handler more robust and self-documenting. None are strictly required given the current API, but they’ll improve readability and fault-tolerance:

• Rename the response variable for consistency

- const reStartResponse = await editorEngine.sandbox.session.restartDevServer();
+ const restartResponse   = await editorEngine.sandbox.session.restartDevServer();

—matches the Promise<boolean> return type and conventional camelCase.

• Prevent concurrent restarts

if (isRestarting) return;
setIsRestarting(true);

—early-return stops double-clicks or repeated calls from queuing up.

• Simplify the boolean check

if (restartResponse) {
  toast.success('Dev server restart initiated');
} else {
  toast.error('Failed to restart dev server');
}

Since restartDevServer(): Promise<boolean> always resolves to true or false, you can drop the undefined-handling branch.

• Log and surface detailed errors

} catch (err) {
  console.error('restartDevServer failed', err);
  const message = err instanceof Error ? err.message : String(err);
  toast.error(`Error restarting dev server: ${message}`);
} finally {
  setIsRestarting(false);
}

—captures stack traces in the console and shows the underlying message in the toast.

Overall, these are optional refactors to tighten up naming, prevent duplicate executions, and improve observability.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

apps/web/client/src/app/project/[id]/_components/right-panel/dev-tab/code-controls.tsx (3)

25-25: Guard against ultra-fast double clicks with a ref, not just state

State updates are async; two rapid clicks before the re-render can slip past the isRestarting check. Add a ref as a synchronous, in-memory guard while keeping state for UI.

-import { useState } from 'react';
+import { useRef, useState } from 'react';
@@
-const [isRestarting, setIsRestarting] = useState(false);
+const [isRestarting, setIsRestarting] = useState(false);
+const restartingRef = useRef(false);

---

96-113: Minor: pass handler directly; expose busy state; cursor when disabled

• Pass the handler directly to avoid creating a new function per render.
• Advertise busy state to assistive tech (aria-busy).
• Optionally swap the cursor when disabled for clearer affordance.

-<Button
+<Button
     variant="ghost"
     size="icon"
     disabled={isRestarting}
-    onClick={() => handleRestartDevServer()}
-    className="p-2 w-fit h-fit hover:bg-background-onlook cursor-pointer"
+    onClick={handleRestartDevServer}
+    aria-busy={isRestarting}
+    className={cn(
+      "p-2 w-fit h-fit hover:bg-background-onlook",
+      isRestarting ? "cursor-not-allowed" : "cursor-pointer"
+    )}
     aria-label="Restart dev server"
 >
     <Icons.Reload className={cn("h-4 w-4", isRestarting && "animate-spin")}/>
 </Button>

---

41-56: Add a brief test plan (and optional unit test) for the restart flow

Given this is user-triggered infra control, please add a lightweight test plan to the PR description and consider a unit test that mocks the engine and verifies UI feedback.

Suggested manual test steps:

• Open a project and trigger “Restart dev server”.
• Expect: button disables, icon spins, toast says “Restart requested”.
• While spinning, attempt multiple clicks: no additional calls should be made.
• Simulate a failure (make restartDevServer reject): expect error toast and re-enabled button.

Optional Jest/RTL sketch:

// CodeControls.restart.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { CodeControls } from './code-controls';

jest.mock('@/components/store/editor', () => ({
  useEditorEngine: () => ({
    sandbox: { session: { restartDevServer: jest.fn().mockResolvedValue(true) } },
    ide: { activeFile: { isDirty: false }, files: [], saveActiveFile: jest.fn() },
  }),
}));

test('invokes restart once and disables while in-flight', async () => {
  render(<CodeControls />);
  const btn = await screen.findByRole('button', { name: /restart dev server/i });
  fireEvent.click(btn);
  // second click should be ignored
  fireEvent.click(btn);
  await waitFor(() => expect(btn).toHaveAttribute('aria-busy', 'true'));
  // assert toast and re-enable happen
  await waitFor(() => expect(btn).toHaveAttribute('aria-busy', 'false'));
});

If you’d like, I can open a follow-up PR to add this test.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.